﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="a.aspx.cs" Inherits="Learn._002List" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Scripts/knockout-3.3.0.js"></script>
</head>
<body>
    <%--    <form id="form1" runat="server">    </form>--%>
    <input type="button"  value="Reserve another seat" data-bind="click:addSeat"/>
    <table>
        <thead>
            <tr>
                <th>Passenger name</th>
                <th>Meal</th>
                <th>Surcharge</th>
                <th></th>
            </tr>
        </thead>
        <!-- Todo: Generate table body -->
        <tbody data-bind='foreach: seats'>
            <tr>
                <%--<td data-bind="text: name">--%>
                <td>
                    <input data-bind="value:name"/>
                </td>
                <%--<td data-bind="text: meal().mealName">--%>
                <td>
                    <select data-bind="options:$root.availableMeals,value:meal,optionsText:'mealName'">
                    </select>
                </td>
                <td data-bind='text: meal().price'>
                </td>
            </tr>
        </tbody>
    </table>
    <script>
        // Class to represent a row in the seat reservations grid
        function SeatReservation(name, initialMeal) {
            var self = this;
            self.name = name;
            self.meal = ko.observable(initialMeal);
        }

        // Overall viewmodel for this screen, along with initial state
        function ReservationsViewModel() {
            var self = this;

            // Non-editable catalog data - would come from the server
            self.availableMeals = [
                { mealName: "Standard (sandwich)", price: 0 },
                { mealName: "Premium (lobster)", price: 34.95 },
                { mealName: "Ultimate (whole zebra)", price: 290 }
            ];

            // Editable data
            self.seats = ko.observableArray([
                new SeatReservation("Steve", self.availableMeals[0]),
                new SeatReservation("Bert", self.availableMeals[1])
            ]);
            self.addSeat = function () {
                self.seats.push(new SeatReservation('', self.availableMeals[0]));

            }
        }

        ko.applyBindings(new ReservationsViewModel());
    </script>
</body>
</html>
